<template>
    <div class="app-box">
        <nav-bar title="抢单" :isBack="false" />
        <van-sticky :offset-top="42">
            <div class="grabsheet_tab">
                <template v-for="(item,index) in grabsheetTab">
                    <span class="rows" :key="index" @click="sheetTab(index)"
                        :class="{active: index === activeIndex}">{{item.name}}</span>
                </template>
            </div>
        </van-sticky>
        <div class="content">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <div class="grabsheet_list" v-show="activeIndex === 0">
                    <div class="list bd-b" v-for="(item, index) in orderList" :key="'grabsheet_list_' + index">
                        <div class="p">
                            <span class="time">{{ activeIndex ? item.grab_time : item.create_time }}</span>
                            <span class="transfer" v-if="activeIndex && item.status === 2"
                                @click="screenshots(item.transfer_voucher)">转账截图</span>
                        </div>
                        <div class="p">
                            <span class="amount">金额：<em>{{ item.amount }} ORG</em></span>
                            <span class="grab_btn" v-if="!activeIndex" @click="orderGrab(item.id)">抢单</span>
                            <span class="grab_btn" v-else
                                @click="confirmReceipt(item)">{{ grabStatus[item.status] }}</span>
                        </div>
                    </div>
                </div>
                <van-list v-show="activeIndex === 1" v-model="loading" :finished="finished" :offset="50"
                    :immediate-check="false" finished-text="暂无数据" @load="onLoad">
                    <div class="grabsheet_list">
                        <div class="list bd-b" v-for="(item, index) in orderList" :key="'grabsheet_list_' + index">
                            <div class="p">
                                <span class="time">{{ activeIndex ? item.grab_time : item.create_time }}</span>
                                <span class="transfer" v-if="activeIndex && item.status === 2"
                                    @click="screenshots(item.transfer_voucher)">转账截图</span>
                            </div>
                            <div class="p">
                                <span class="amount">金额：<em>{{ item.amount }} ORG</em></span>
                                <span class="grab_btn" v-if="!activeIndex" @click="orderGrab(item.id)">抢单</span>
                                <span class="grab_btn" v-else
                                    @click="confirmReceipt(item)">{{ grabStatus[item.status] }}</span>
                            </div>
                        </div>
                    </div>
                </van-list>
                <div style="height:1.4rem"></div>
            </van-pull-refresh>
        </div>
        <van-popup v-model="showPayPassword" position="bottom" closeable :style="{ height: '10.4rem' }">
            <j-password-input @change="withdrawSecond">
                <div class="password-title bd-b">请输入支付密码</div>
                <div style="margin-bottom:20px;"></div>
                <!-- <div class="password-deposit">
        <span class="password-deposit__text">提现金额</span>
        <div class="password-deposit__amount">￥{{ withdrawalAmount * 0.95 }}</div>
      </div> -->
            </j-password-input>
        </van-popup>
        <van-image-preview v-model="isShow" :images="imagesPreview" @change="onImageChange">
            <template v-slot:index>转帐截图</template>
        </van-image-preview>
        <tab-bar />

        <div class="mask" v-if="!setPrice &&  activeIndex==0"></div>
        <div class="alert_fx" v-if="!setPrice &&  activeIndex==0">
            <h2>输入抢单金额</h2>
            <div class="ipt">
                <input type="number" v-model="price" placeholder="">
            </div>
            <div class="submit">
                <div class="btn" @click="setPriceFn">确定</div>
            </div>
        </div>
    </div>
</template>
<script>
import md5 from 'md5';
import {
  setTimeout
} from 'timers';
export default {
  name: 'grabsheet',
  data() {
    return {
      setPrice: true,
      price: 0,
      isShow: false,
      imagesPreview: [],
      isLoading: false,
      loading: false,
      showPayPassword: false,
      finished: false,
      withdrawalAmount: null,
      orderId: null,
      pages: {
        page: 1,
        limit: 10
      },
      activeIndex: 0,
      grabsheetTab: [{
        id: 1,
        name: '正在抢单'
      },
      {
        id: 2,
        name: '抢到的单'
      }
      ],
      grabStatus: {
        '1': '正在打款',
        '2': '确认收款',
        '3': '已收款'
      },
      orderList: []
    };
  },
  created() {
    if (this.$route.query.type) {
      this.activeIndex = this.$route.query.type - 1;
    }
    if (this.setPrice) {
      this.onRefresh();
    }
  },
  mounted() {},
  methods: {
    setPriceFn() {
      if (this.price <= 0) {
        this.$toast('抢单金额不能为0');
        return;
      }
      this.setPrice = true;
      this.onRefresh();
    },
    onImageChange() {},
    screenshots(data) {
      this.imagesPreview = [data];
      this.isShow = true;
    },
    onRefresh() {
      this.$set(this.pages, 'page', 1);
      this.orderList = [];
      this.fetchOrderList();
    },
    onLoad() {
      this.pages.page++;
      this.fetchOrderList();
    },
    withdrawSecond(val) {
      const options = {
        id: this.orderId,
        payPass: md5(md5(val))
      };
      this.$API.user.orderGrab(options).then(res => {
        if (!res.code) {
          this.$toast('抢单成功');
          this.sheetTab(1);
          // this.onRefresh();
        }
        this.showPayPassword = false;
      });
    },
    // 查询列表信息
    fetchOrderList() {
      this.$toast.loading();

      // if (this.activeIndex === 0) {
      //   this.pages.amount = this.price;
      // }
      this.$API.user['getOrder' + (this.activeIndex === 0 ? 'Grab' : 'My') + 'List'](this.pages)
        .then(res => {
          if (!res.code) {
            if (this.pages.page === 1) {
              this.$set(this, 'orderList', res.data);
            } else {
              this.$set(this, 'orderList', [...this.orderList, ...res.data]);
            }
            this.$toast.clear();
            if (this.activeIndex === 0) {
              this.$set(this, 'finished', true);
            } else {
              if (this.orderList.length === res.count) {
                this.$set(this, 'finished', true);
              }
            }
          } else {
            this.$notify({
              message: res.message,
              type: 'danger'
            });
          }
        })
        .finally(() => {
          if (this.pages.page === 1) {
            setTimeout(() => {
              this.$set(this, 'isLoading', false);
            }, 500);
          }
          this.$set(this, 'loading', false);
        });
    },
    // 抢单
    orderGrab(id) {
      // this.$router.push('/payType?type=2&id=' + id);

      this.showPayPassword = true;
      this.orderId = id;
    },
    confirmReceipt(item) {
      if (item.status !== 2) return;
      // 这里的UI设置与组件是相反的所以确认就是取消
      this.$dialog
        .confirm({
          message: '是否确认收到款项？',
          width: '280px',
          confirmButtonText: '否',
          confirmButtonColor: '#999',
          cancelButtonText: '是',
          cancelButtonColor: '#292929'
        })
        .then(res => {})
        .catch(err => {
          console.log(err);
          this.$API.user.getOrderConfirm({
            id: item.id
          }).then(res => {
            if (!res.code) {
              this.$toast('确认成功');
              this.onRefresh();
            } else {
              this.$notify({
                message: res.message,
                type: 'danger'
              });
            }
          });
        });
    },
    sheetTab(index) {
      this.activeIndex = index;
      this.onRefresh();
    }
  }
};
</script>
<style lang="less" scoped>
    .grabsheet_tab {
        position: relative;
        z-index: 999;
    }

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .6);
        width: 100%;
        height: 100%;
        z-index: 99;
    }

    .alert_fx {
        width: 80%;
        background: #fff;
        z-index: 100;
        top: 35%;
        position: fixed;
        left: 10%;
        border-radius: 20px;
        text-align: center;

        h2 {
            font-size: 34px;
            color: #333;
            margin-top: 30px;
        }

        .ipt {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;

            input {
                height: 60px;
                border-bottom: 2px solid #ddd;
                padding-left: 56px;
            }

            &:before {
                font-size: 36px;
                content: "￥";
                font-weight: bold;
            }
        }

        .submit {
            border-top: 1px solid #ddd;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 50px;

            .btn {
                font-size: 30px;
                color: #333;
                font-weight: bold;
            }
        }
    }

    .grabsheet_tab {
        display: flex;
        background-color: #F79201;

        .rows {
            flex: 1;
            color: #fff;
            display: block;
            text-align: center;
            font-size: 30px;
            padding: 32px 0;
            vertical-align: middle;

            &::before {
                content: '';
                display: inline-block;
                width: 47px;
                vertical-align: middle;
                height: 47px;
                background-repeat: no-repeat;
                background-position: center center;
                position: relative;
                top: -2px;
                margin-right: 10px;
            }
        }

        ;

        .rows:first-child {
            &::before {
                background-image: url('../../assets/images/icon-grad-loading.png');
                background-size: 40px 46px;
            }
        }

        .rows:last-child {
            &::before {
                background-image: url('../../assets/images/icon-grab-list.png');
                background-size: contain;
            }
        }

        .rows.active {
            background-color: #E31D1A;
        }
    }

    .grabsheet_list {
        padding: 0 30px 0;
        background-color: #fff;
        margin-top: 20px;

        .list {
            padding: 22px 0;

            .p {
                display: flex;
                justify-content: space-between;

                .time {
                    color: #999;
                    font-size: 22px;
                }

                .transfer {
                    color: #12C4DE;
                    font-size: 22px;
                }

                .amount {
                    color: #999;
                    font-size: 22px;

                    em {
                        font-style: normal;
                        font-size: 30px;
                        color: #E31D1A;
                        margin-left: 20px;
                    }
                }

                .grab_btn {
                    display: inline-block;
                    height: 54px;
                    text-align: center;
                    color: #fff;
                    font-size: 30px;
                    padding: 0 35px;
                    line-height: 56px;
                    background: linear-gradient(107deg, rgba(247, 146, 1, 1), rgba(227, 29, 26, 1));
                    border-radius: 27px;
                }
            }

            .p:last-child {
                margin-top: 77px;
            }

        }
    }

    .content {
        height: calc(100% - 200px);

        .van-pull-refresh {
            min-height: 100%;
        }
    }
</style>
